import "./videoDistribution.scss";
import type { UploadProps } from "antd";
import { Upload, message } from "antd";
import { UpLoad } from "../svg/svg";
import { UploadButton, Button } from "../button/button";
import { useRef, useState } from "react";
import { Tag } from "../tag/tag";
import { useTextReader } from "@/utils/hook";
const { Dragger } = Upload;

const VideoDistribution = () => {
  const [fileList, setFileList] = useState<any[]>([]);
  const tagListRef = useRef<HTMLUListElement | null>(null);
  const [tagListData, setTagListData] = useState<string[]>([]);
  const [writeListData, setWriteListData] = useState<string[]>([]);
  const textReader = useTextReader();

  const props: UploadProps = {
    beforeUpload: (file) => {
      setFileList([...fileList, file]);
      return false; // 阻止默认上传
    },
    multiple: true,
    accept: "video/*",
    fileList,
    onRemove: (file) => {
      setFileList(fileList.filter((f) => f.uid !== file.uid)); // 删除文件
    },
  };

  // tagDataList中的随机数组
  const mathRandomArray = (array, length) => {
    const shuffledArr = array.slice();
    for (let i = shuffledArr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [shuffledArr[i], shuffledArr[j]] = [shuffledArr[j], shuffledArr[i]];
    }
    return shuffledArr.slice(0, length);
  };

  const handleUpload = () => {
    if (fileList.length === 0) {
      message.warning("请选择要上传的视频文件");
      return;
    }

    // 使用 FormData 携带文件和额外参数
    const formData = new FormData();
    fileList.forEach((file) => {
      formData.append("file", file); // 添加文件
    });

    formData.append("tagList", JSON.stringify(mathRandomArray(tagListData, 5)));
    formData.append(
      "writeList",
      JSON.stringify(mathRandomArray(writeListData, 1))
    );
  };

  return (
    <>
      <div className="dashboard_upload_box">
        <Dragger {...props} className="dashboard_upload_main">
          <p className="ant-upload-drag-icon">
            <UpLoad />
          </p>
          <p className="ant-upload-hint">点击或拖拽上传文件</p>
        </Dragger>
        {/* 标签选择 */}
        <h3 className="dashaboard_tag_title">标签选择（请选择文件导入）</h3>
        <div className="dashboard_tag_box">
          <div className="dashboard_tag_label">
            <UploadButton
              label="选择文件"
              accept=".txt,.docx"
              onChange={(e) =>
                textReader(
                  e as React.ChangeEvent<HTMLInputElement>,
                  setTagListData
                )
              }
            />
          </div>
          <ul className="dashboard_tag_list" ref={tagListRef}>
            {tagListData.map((item, index) => (
              <li className="dashboard_tag_item" key={index}>
                <Tag className="dashboard_tag_main">{item}</Tag>
              </li>
            ))}
          </ul>
        </div>

        {/* 文案选择 */}
        <h3 className="dashaboard_copywritin_title">
          文案选择（请选择文件导入）
        </h3>

        <div className="dashboard_copywriting_box">
          <div className="dashboard_copywriting_label">
            <UploadButton
              label="选择文件"
              accept=".txt,.docx"
              onChange={(e) =>
                textReader(
                  e as React.ChangeEvent<HTMLInputElement>,
                  setWriteListData
                )
              }
              id={1}
            />
          </div>
          <ul className="dashboard_copywriting_list" ref={tagListRef}>
            {writeListData.map((item, index) => (
              <li className="dashboard_copywriting_item" key={index}>
                <Tag className="dashboard_copywriting_main">{item}</Tag>
              </li>
            ))}
          </ul>
        </div>
        <div className="dashboard_upload_button_box">
          <Button onClick={handleUpload} color="#c127b9" label={"发布"} />
        </div>
      </div>
    </>
  );
};

export default VideoDistribution;
